<?php

use yii\widgets\LinkPager;
use yii\base\Object;
use yii\bootstrap\ActiveForm;
use common\utils\CommonFun;
use yii\helpers\Url;

use backend\models\Images;

$modelLabel = new \backend\models\Images();
?>

<?php $this->beginBlock('header'); ?>
    <!-- <head></head>中代码块 -->
<?php $this->endBlock(); ?>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">

                    <div class="box-header">
                        <h3 class="box-title">数据列表</h3>
                        <div class="box-tools">
                            <div class="input-group input-group-sm" style="width: 150px;">
                                <button id="create_btn" type="button" class="btn btn-xs btn-primary">添&nbsp;&emsp;加
                                </button>
                                |
                                <button id="delete_btn" type="button" class="btn btn-xs btn-danger">批量删除</button>
                            </div>
                        </div>
                    </div>
                    <!-- /.box-header -->

                    <div class="box-body">
                        <div id="example1_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                            <!-- row start search-->
                            <div class="row">
                                <div class="col-sm-12">
                                    <?php ActiveForm::begin([
                                        'id'      => 'images-search-form',
                                        'method'  => 'get',
                                        'options' => ['class' => 'form-inline'],
                                        'action'  => Url::toRoute('images/index')
                                    ]); ?>

                                    <div class="form-group" style="margin: 5px;">
                                        <label><?= $modelLabel->getAttributeLabel('id') ?>:</label>
                                        <input type="text" class="form-control" id="query[id]" name="query[id]"
                                               value="<?= isset($query["id"]) ? $query["id"] : "" ?>">
                                    </div>
                                    <div class="form-group">
                                        <a onclick="searchAction()" class="btn btn-primary btn-sm" href="#"> <i
                                                    class="glyphicon glyphicon-zoom-in icon-white"></i>搜索</a>
                                    </div>
                                    <?php ActiveForm::end(); ?>
                                </div>
                            </div>
                            <!-- row end search -->

                            <!-- row start -->
                            <div class="row">
                                <div class="col-sm-12 table-responsive">
                                    <table id="data_table" class="table table-bordered table-striped dataTable"
                                           role="grid"
                                           aria-describedby="data_table_info">
                                        <thead>
                                        <tr role="row">

                                            <?php
                                            $orderby = isset($_GET['orderby']) ? $_GET['orderby'] : '';
                                            echo '<th><input id="data_table_check" type="checkbox"></th>';
                                            echo '<th onclick="orderby(\'id\', \'desc\')" ' . CommonFun::sortClass($orderby,
                                                    'id') . ' tabindex="0" aria-controls="data_table" rowspan="1" colspan="1" aria-sort="ascending" >' . $modelLabel->getAttributeLabel('id') . '</th>';
                                            //              echo '<th onclick="orderby(\'uid\', \'desc\')" '.CommonFun::sortClass($orderby, 'uid').' tabindex="0" aria-controls="data_table" rowspan="1" colspan="1" aria-sort="ascending" >'.$modelLabel->getAttributeLabel('uid').'</th>';
                                            echo '<th onclick="orderby(\'image\', \'desc\')" ' . CommonFun::sortClass($orderby,
                                                    'image') . ' tabindex="0" aria-controls="data_table" rowspan="1" colspan="1" aria-sort="ascending" >' . $modelLabel->getAttributeLabel('image') . '</th>';
                                            echo '<th onclick="orderby(\'brife\', \'desc\')" ' . CommonFun::sortClass($orderby,
                                                    'brife') . ' tabindex="0" aria-controls="data_table" rowspan="1" colspan="1" aria-sort="ascending" >' . $modelLabel->getAttributeLabel('brife') . '</th>';
                                            //              echo '<th onclick="orderby(\'link\', \'desc\')" '.CommonFun::sortClass($orderby, 'link').' tabindex="0" aria-controls="data_table" rowspan="1" colspan="1" aria-sort="ascending" >'.$modelLabel->getAttributeLabel('link').'</th>';
                                            echo '<th onclick="orderby(\'updated_at\', \'desc\')" ' . CommonFun::sortClass($orderby,
                                                    'updated_at') . ' tabindex="0" aria-controls="data_table" rowspan="1" colspan="1" aria-sort="ascending" >' . $modelLabel->getAttributeLabel('updated_at') . '</th>';
                                            echo '<th onclick="orderby(\'created_at\', \'desc\')" ' . CommonFun::sortClass($orderby,
                                                    'created_at') . ' tabindex="0" aria-controls="data_table" rowspan="1" colspan="1" aria-sort="ascending" >' . $modelLabel->getAttributeLabel('created_at') . '</th>';

                                            ?>

                                            <th tabindex="0" aria-controls="data_table" rowspan="1" colspan="1"
                                                aria-sort="ascending">操作
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        <?php
                                        foreach ($models as $model) {
                                            echo '<tr id="rowid_' . $model->id . '">';
                                            echo '  <td><label><input type="checkbox" value="' . $model->id . '"></label></td>';
                                            echo '  <td>' . $model->id . '</td>';
//                echo '  <td>' . $model->uid . '</td>';
                                            echo '  <td>' . '<img  width = "200px" src='.$model->imgWebUrl." />" . '</td>';
                                            echo '  <td>' . $model->brife . '</td>';
//                echo '  <td>' . $model->link . '</td>';
                                            echo '  <td>' . $model->updatedAt . '</td>';
                                            echo '  <td>' . $model->createdAt . '</td>';
                                            echo '  <td class="center">';
                                            echo '      <a id="view_btn" onclick="viewAction(' . $model->id . ')" class="btn btn-primary btn-sm" href="#"> <i class="glyphicon glyphicon-zoom-in icon-white"></i>查看</a>';
                                            echo '      <a id="edit_btn" onclick="editAction(' . $model->id . ')" class="btn btn-primary btn-sm" href="#"> <i class="glyphicon glyphicon-edit icon-white"></i>修改</a>';
                                            echo '      <a id="delete_btn" onclick="deleteAction(' . $model->id . ')" class="btn btn-danger btn-sm" href="#"> <i class="glyphicon glyphicon-trash icon-white"></i>删除</a>';
                                            echo '  </td>';
                                            echo '</tr>';
                                        }

                                        ?>


                                        </tbody>
                                        <!-- <tfoot></tfoot> -->
                                    </table>
                                </div>
                            </div>
                            <!-- row end -->

                            <!-- row start -->
                            <div class="row">
                                <div class="col-sm-5">
                                    <div class="dataTables_info" id="data_table_info" role="status" aria-live="polite">
                                        <div class="infos">
                                            从<?= $pages->getPage() * $pages->getPageSize() + 1 ?>
                                            到 <?= ($pageCount = ($pages->getPage() + 1) * $pages->getPageSize()) < $pages->totalCount ? $pageCount : $pages->totalCount ?>
                                            共 <?= $pages->totalCount ?> 条记录
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-7">
                                    <div class="dataTables_paginate paging_simple_numbers" id="data_table_paginate">
                                        <?= LinkPager::widget([
                                            'pagination'     => $pages,
                                            'nextPageLabel'  => '»',
                                            'prevPageLabel'  => '«',
                                            'firstPageLabel' => '首页',
                                            'lastPageLabel'  => '尾页',
                                        ]); ?>

                                    </div>
                                </div>
                            </div>
                            <!-- row end -->
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->

    <div class="modal fade" id="edit_dialog" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h3>Settings</h3>
                </div>
                <div class="modal-body">


                    <?php $form = ActiveForm::begin([
                        "id"          => "images-form",
                        "class"       => "form-horizontal",
                        "action"      => Url::toRoute("images/save"),
                        "options"     => [
                            'enctype' => 'multipart/form-data',
                        ],
                        'fieldConfig' => [  //统一修改字段的模板
                            'template' => "{input}",
                        ],
                    ]); ?>

                    <input type="hidden" class="form-control" id="id" name="id"/>

                    <!--          <div id="uid_div" class="form-group">-->
                    <!--              <label for="uid" class="col-sm-2 control-label">-->
                    <?php //echo $modelLabel->getAttributeLabel("uid")?><!--</label>-->
                    <!--              <div class="col-sm-10">-->
                    <!--                  <input type="text" class="form-control" id="uid" name="Images[uid]" placeholder="" />-->
                    <!--              </div>-->
                    <!--              <div class="clearfix"></div>-->
                    <!--          </div>-->

                    <div id="image_div" class="form-group">
                        <label for="image"
                               class="col-sm-2 control-label"><?php echo $modelLabel->getAttributeLabel("image") ?></label>
                        <div class="col-sm-10">
                            <input type="text" readonly disabled class="form-control" id="image"
                                   placeholder="图片名"/>
                            <input type="file" class="form-control" id="file" name="Images[file]" placeholder=""
                                   accept="image/*"/>
                            <img width="200px" id="preview"/>
                        </div>
                        <div class="clearfix"></div>
                    </div>

                    <div id="brife_div" class="form-group">
                        <label for="brife"
                               class="col-sm-2 control-label"><?php echo $modelLabel->getAttributeLabel("brife") ?></label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="brife" name="Images[brife]" placeholder=""/>
                        </div>
                        <div class="clearfix"></div>
                    </div>

                    <div id="link_div" class="form-group">
                        <label for="link"
                               class="col-sm-2 control-label"><?php echo $modelLabel->getAttributeLabel("link") ?></label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="link" name="Images[link]" placeholder=""/>
                        </div>
                        <div class="clearfix"></div>
                    </div>

                    <!--          <div id="updated_at_div" class="form-group">-->
                    <!--              <label for="updated_at" class="col-sm-2 control-label">-->
                    <?php //echo $modelLabel->getAttributeLabel("updated_at")?><!--</label>-->
                    <!--              <div class="col-sm-10">-->
                    <!--                  <input type="text" class="form-control" id="updated_at" name="Images[updated_at]" placeholder="" />-->
                    <!--              </div>-->
                    <!--              <div class="clearfix"></div>-->
                    <!--          </div>-->

                    <!--          <div id="created_at_div" class="form-group">-->
                    <!--              <label for="created_at" class="col-sm-2 control-label">-->
                    <?php //echo $modelLabel->getAttributeLabel("created_at")?><!--</label>-->
                    <!--              <div class="col-sm-10">-->
                    <!--                  <input type="text" class="form-control" id="created_at" name="Images[created_at]" placeholder="" />-->
                    <!--              </div>-->
                    <!--              <div class="clearfix"></div>-->
                    <!--          </div>-->


                    <?php ActiveForm::end(); ?>
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-default" data-dismiss="modal">关闭</a> <a
                            id="edit_dialog_ok" href="#" class="btn btn-primary">确定</a>
                </div>
            </div>
        </div>
    </div>
<?php $this->beginBlock('footer'); ?>
    <!-- <body></body>后代码块 -->
    <script>
        function orderby(field, op) {
            var url = window.location.search;
            var optemp = field + " desc";
            if (url.indexOf('orderby') != -1) {
                url = url.replace(/orderby=([^&?]*)/ig, function ($0, $1) {
                    var optemp = field + " desc";
                    optemp = decodeURI($1) != optemp ? optemp : field + " asc";
                    return "orderby=" + optemp;
                });
            }
            else {
                if (url.indexOf('?') != -1) {
                    url = url + "&orderby=" + encodeURI(optemp);
                }
                else {
                    url = url + "?orderby=" + encodeURI(optemp);
                }
            }
            window.location.href = url;
        }

        function searchAction() {
            $('#images-search-form').submit();
        }

        function viewAction(id) {
            initModel(id, 'view', 'fun');
        }

        function initEditSystemModule(data, type) {
            if (type == 'create') {
                $("#id").val('');
                $("#uid").val('');
                $("#image").val('');
                $("#brife").val('');
                $("#link").val('');
                $("#updated_at").val('');
                $("#created_at").val('');

            }
            else {
                // alert(JSON.stringify(data));
                $("#id").val(data.id);
                $("#uid").val(data.uid);
                $("#image").val(data.image);
                $("#preview").attr({'src': data.imgWebUrl, 'width': 200 + 'px', 'heigth': 200 + 'px'});
                $("#brife").val(data.brife);
                $("#link").val(data.link);
                $("#updated_at").val(data.updated_at);
                $("#created_at").val(data.created_at);
            }
            if (type == "view") {
                $("#id").attr({readonly: true, disabled: true});
                $("#uid").attr({readonly: true, disabled: true});
                // $("#image").attr({readonly: true, disabled: true});
                $("#file").attr({readonly: true, disabled: true});
                $("#brife").attr({readonly: true, disabled: true});
                $("#link").attr({readonly: true, disabled: true});
                $("#updated_at").attr({readonly: true, disabled: true});
                $("#created_at").attr({readonly: true, disabled: true});
                $('#edit_dialog_ok').addClass('hidden');
            }
            else {
                $("#id").attr({readonly: false, disabled: false});
                $("#uid").attr({readonly: false, disabled: false});
                // $("#image").attr({readonly: false, disabled: false});
                $("#file").attr({readonly: false, disabled: false});
                $("#brife").attr({readonly: false, disabled: false});
                $("#link").attr({readonly: false, disabled: false});
                $("#updated_at").attr({readonly: false, disabled: false});
                $("#created_at").attr({readonly: false, disabled: false});
                $('#edit_dialog_ok').removeClass('hidden');
            }
            $('#edit_dialog').modal('show');
        }

        function initModel(id, type, fun) {

            $.ajax({
                type: "GET",
                url: "<?=Url::toRoute('images/view')?>",
                data: {"id": id},
                cache: false,
                dataType: "json",
                error: function (xmlHttpRequest, textStatus, errorThrown) {
                    alert("出错了，" + textStatus);
                },
                success: function (data) {
                    initEditSystemModule(data, type);
                }
            });
        }

        function editAction(id) {
            initModel(id, 'edit');
        }

        function deleteAction(id) {
            var ids = [];
            if (!!id == true) {
                ids[0] = id;
            }
            else {
                var checkboxs = $('#data_table :checked');
                if (checkboxs.size() > 0) {
                    var c = 0;
                    for (i = 0; i < checkboxs.size(); i++) {
                        var id = checkboxs.eq(i).val();
                        if (id != "") {
                            ids[c++] = id;
                        }
                    }
                }
            }
            if (ids.length > 0) {
                admin_tool.confirm('请确认是否删除', function () {
                    $.ajax({
                        type: "GET",
                        url: "<?=Url::toRoute('images/delete')?>",
                        data: {"ids": ids},
                        cache: false,
                        dataType: "json",
                        error: function (xmlHttpRequest, textStatus, errorThrown) {
                            admin_tool.alert('msg_info', '出错了，' + textStatus, 'warning');
                        },
                        success: function (data) {
                            for (i = 0; i < ids.length; i++) {
                                $('#rowid_' + ids[i]).remove();
                            }
                            admin_tool.alert('msg_info', '删除成功', 'success');
                            window.location.reload();
                        }
                    });
                });
            }
            else {
                admin_tool.alert('msg_info', '请先选择要删除的数据', 'warning');
            }

        }

        function getSelectedIdValues(formId) {
            var value = "";
            $(formId + " :checked").each(function (i) {
                if (!this.checked) {
                    return true;
                }
                value += this.value;
                if (i != $("input[name='id']").size() - 1) {
                    value += ",";
                }
            });
            return value;
        }

        $('#edit_dialog_ok').click(function (e) {
            e.preventDefault();
            $('#images-form').submit();
        });

        $('#create_btn').click(function (e) {
            e.preventDefault();
            initEditSystemModule({}, 'create');
        });

        $('#delete_btn').click(function (e) {
            e.preventDefault();
            deleteAction('');
        });

        $('#images-form').bind('submit', function (e) {
            e.preventDefault();
            var id = $("#id").val();
            var action = id == "" ? "<?=Url::toRoute('images/create')?>" : "<?=Url::toRoute('images/update')?>";
            $(this).ajaxSubmit({
                type: "post",
                dataType: "json",
                url: action,
                success: function (value) {
                    if (value.errno == 0) {
                        $('#edit_dialog').modal('hide');
                        admin_tool.alert('msg_info', '添加成功', 'success');
                        window.location.reload();
                    }
                    else {
                        var json = value.data;
                        for (var key in json) {
                            $('#' + key).attr({
                                'data-placement': 'bottom',
                                'data-content': json[key],
                                'data-toggle': 'popover'
                            }).addClass('popover-show').popover('show');

                        }
                    }

                }
            });
        });

        $(function () {
            var fil = $("#file");
            $("#preview").insertAfter("#file");
            fil.bind('change', function () {
                var fordate = new FormData();
                var fils = $("#file").get(0).files[0];
                fordate.append('pic', fils);
                var srcc = window.URL.createObjectURL(fils);
                console.log(srcc);
                $("#preview").attr({'src': srcc, 'width': 200 + 'px', 'heigth': 200 + 'px'});
            });
        });

    </script>
<?php $this->endBlock(); ?>